<template>
  <div style="width:100%;">
    <template v-if="!$store.getters.screenWidth">
      <div style="width:100%">
        <div class="addressTop">收货地址</div>
        <div style="text-align:left;">
          <el-button type="primary" size="mini" @click="addaddress">添加收货地址</el-button>
        </div>
        <div class="address" v-if="tableData.length==0">
          <el-empty description="请添加收货地址"></el-empty>
        </div>
        <div v-else style="text-align:left;margin-top:20px;margin">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="realName" label="姓名" width="180"></el-table-column>
            <el-table-column prop="telphone" label="电话" width="180"></el-table-column>
            <el-table-column prop="detail" label="地址"></el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <div v-if="scope.row.type==1" style="margin-left:20px;">
                  <el-button type="danger" size="mini" round>默认地址</el-button>
                </div>
                <div v-if="scope.row.type == 0" style="margin-left:20px;">
                  <el-button
                    type="text"
                    size="mini"
                    round
                    @click="setDefault(scope.row.id)"
                    :loading="setLoading && depId==scope.row.id"
                  >设为默认</el-button>
                  <!-- <el-button
                    type="text"
                    size="mini"
                    round
                    @click="edit(scope.row)"
                    :loading="setLoadingedit && depId==scope.row.id"
                  >编辑</el-button>-->
                  <el-button
                    type="text"
                    size="mini"
                    round
                    @click="addressdDelete(scope.row.id)"
                    :loading="setLoadingde && depId==scope.row.id"
                  >删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-dialog title="收货地址" :visible.sync="dialogFormVisible" destroy-on-close>
          <el-form :model="form" ref="form">
            <el-form-item
              prop="name"
              :rules="{ required: true, message: '收货人姓名', trigger: 'blur' }"
            >
              <el-input
                style="width:100%"
                v-model="form.name"
                autocomplete="off"
                placeholder="收货人姓名"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="phone"
              :rules="{ required: true, message: '收货人电话', trigger: 'blur' }"
            >
              <el-input
                style="width:100%"
                v-model="form.phone"
                autocomplete="off"
                placeholder="收货人电话"
                maxlength="11"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="provice"
              :rules=" { required: true, message: '请选择省市', trigger: 'blur' }"
            >
              <el-cascader
                style="width:100%"
                :options="options"
                v-model="form.provice"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item
              prop="detail"
              :rules="{ required: true, message: '收货地址', trigger: 'blur' }"
            >
              <el-input
                style="width:100%"
                type="textarea"
                v-model="form.detail"
                autocomplete="off"
                placeholder="收货地址"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogForm(addtype,addressItem)">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    <template v-else>
      <div v-if="tableData.length>0">
        <div class="addressItem" v-for="(item,index) in tableData" :key="index">
          <div>
            <div class="addressTopTit">
              <div style="font-size:16px;font-weight:500;margin-right:10px">{{item.realName}}</div>
              <div style="font-size:15px;color:#aaa">{{item.telphone}}</div>
              <div class="tag" v-if="item.type==1">默认</div>
            </div>
            <div
              style="width:100%;text-align:left;margin-top:5px;word-break: break-all;font-size:15px;"
            >{{item.detail}}</div>
            
          </div>
          <div v-if="item.type == 0" style="margin-left:20px;">
            <el-button
              type="text"
              size="mini"
              round
              @click="setDefault(item.id)"
              :loading="setLoading && depId==item.id"
            >设为默认</el-button>
            <!-- <el-button
                    type="text"
                    size="mini"
                    round
                    @click="edit(scope.row)"
                    :loading="setLoadingedit && depId==scope.row.id"
            >编辑</el-button>-->
            <el-button
              type="text"
              size="mini"
              round
              @click="addressdDelete(item.id)"
              :loading="setLoadingde && depId==item.id"
            >删除</el-button>
          </div>
        </div>

        <div style="height:50px;background:#fff"></div>
      </div>
      <div class="buttonBottomOut">
        <div class="buttonBottom" @click="addaddress">添加收货地址</div>
      </div>
      <div class="address" v-if="tableData.length==0">
        <el-empty description="请添加收货地址"></el-empty>
      </div>
      <el-dialog destroy-on-close id="eldefault" title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form" ref="form">
          <el-form-item prop="name" :rules="{ required: true, message: '收货人姓名', trigger: 'blur' }">
            <el-input style="width:100%" v-model="form.name" autocomplete="off" placeholder="收货人姓名"></el-input>
          </el-form-item>
          <el-form-item prop="phone" :rules="{ required: true, message: '收货人电话', trigger: 'blur'}">
            <el-input
              style="width:100%"
              v-model="form.phone"
              autocomplete="off"
              placeholder="收货人电话"
              maxlength="11"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="provice"
            :rules=" { required: true, message: '请选择省市', trigger: 'blur' }"
          >
            <el-cascader
              style="width:100%"
              :options="options"
              v-model="form.provice"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item prop="detail" :rules="{ required: true, message: '收货地址', trigger: 'blur' }">
            <el-input
              style="width:100%"
              type="textarea"
              v-model="form.detail"
              autocomplete="off"
              placeholder="收货地址"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogForm(addtype,addressItem)">确 定</el-button>
        </div>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import {
  addressAdd,
  addressList,
  setDefault,
  addressdDelete,
  addressupdate
} from "@/api/api.js";
import { provinceAndCityData, CodeToText } from "element-china-area-data";

export default {
  data() {
    return {
      addresslist: [],
      options: provinceAndCityData,
      dialogFormVisible: false,
      form: {
        name: "",
        phone: "",
        detail: "",
        provice: ""
      },
      address: "",
      formLabelWidth: "120px",
      address: null,
      setLoading: false,
      tableData: [],
      depId: null,
      setLoadingde: false,
      setLoadingedit: false,
      addressItem: null,
      addtype: null
    };
  },
  mounted() {
    this.getListAddres();
  },
  methods: {
    handleChange(value) {
      var ctt = CodeToText[value[0]] + CodeToText[value[1]];
      this.address = ctt;
    },
    addaddress() {
      this.addtype = "add";
      this.dialogFormVisible = true;
    },
    edit(item) {
      this.dialogFormVisible = true;
      this.form.name = item.realName;
      this.form.phone = item.telphone;
      this.form.detail = item.detail;
      this.form.provice = item.provice;
      this.addtype = "edit";
      this.addressItem = item;
    },
    dialogForm(type, item = null) {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          if (type == "add") {
            addressAdd({
              detail: this.address + this.form.detail,
              id: "",
              type: 1,
              province: CodeToText[this.form.provice[0]],
              realName: this.form.name,
              telphone: this.form.phone,
              uid: this.$store.getters["userId"]
            }).then(res => {
              this.$notify({
                title: "成功",
                message: `地址添加成功`,
                type: "success"
              });
              this.getListAddres();
              this.dialogFormVisible = false;
            });
          } else {
            addressupdate({
              detail: this.address + this.form.detail,
              id: item.id,
              type: item.type,
              province: CodeToText[this.form.provice[0]],
              realName: this.form.name,
              telphone: this.form.phone,
              uid: this.$store.getters["userId"]
            }).then(res => {
              this.$notify({
                title: "成功",
                message: `地址编辑成功`,
                type: "success"
              });
              this.getListAddres();
              this.dialogFormVisible = false;
            });
          }
        } else {
          return false;
        }
      });
    },
    async getListAddres() {
      const { data } = await addressList({
        uid: this.$store.getters["userId"]
      });
      this.tableData = data;
    },

    getLabel(val) {
      this.address = val;
    },
    async addressdDelete(id) {
      this.depId = id;
      this.setLoadingde = true;
      try {
        await addressdDelete({
          id: id
        });
        setTimeout(async () => {
          await this.getListAddres();
        }, 1000);
      } finally {
        setTimeout(async () => {
          this.setLoadingde = false;
        }, 1000);
      }
    },
    async setDefault(id) {
      this.depId = id;
      this.setLoading = true;
      try {
        await setDefault({
          id: id,
          uid: this.$store.getters["userId"]
        });
        setTimeout(async () => {
          await this.getListAddres();
        }, 1000);
      } finally {
        setTimeout(async () => {
          this.setLoading = false;
        }, 1000);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep #eldefault {
  .el-dialog {
    width: 90% !important;
  }
}
.el-button.is-round {
  padding: 2px;
}
.addressTop {
  font-size: 15px;
  color: #014d7f;
  background-color: #f3f8fe;
  height: 30px;
  line-height: 30px;
  margin-bottom: 20px;
  padding-left: 10px;
  text-align: left;
}
.el-radio {
  display: flex;
  width: 100%;
  padding: 10px;
  align-items: center;
}
.el-dialog {
  width: 30%;
}
.address {
  width: 100%;
  padding-top: 30px;
  text-align: center;
  font-size: 16px;
  color: #f96868;
}
.el-dialog__header {
  background: rgb(98, 168, 234);
  color: #fff;
}
.el-dialog__title {
  color: #fff;
}
.addressItem {
  width: 100%;
  padding: 10px 15px;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
  // border-bottom: 1px solid #efefef;
  &:first-child {
    padding-top: 20px;
  }
  & + .addressItem {
    border-top: 1px solid #efefef;
  }

  // &:last-child {
  //   // border-bottom:none!important;
  //   padding-bottom: 100px;
  // }

  .addressTopTit {
    display: flex;
    align-items: center;
    .tag {
      width: 40px;
      height: 18px;
      border: 1px solid orangered;
      border-radius: 5px;
      color: orangered;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
    }
  }
}
.buttonBottomOut {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  .buttonBottom {
    width: 80%;
    height: 40px;
    margin: 0 auto;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: rgb(98, 168, 234);
    margin: 0 auto;
    font-size: 16px;
  }
}
</style>